<template>
  <div>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"
        >剩余<strong>{{ shengyu }}</strong></span
      >
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a
            @click="$emit('changeFlag', 1)"
            :class="{ selected: flag === 1 }"
            href="#/"
            >全部任务</a
          >
        </li>
        <li>
          <a
            @click="$emit('changeFlag', 2)"
            :class="{ selected: flag === 2 }"
            href="#/active"
            >进行中</a
          >
        </li>
        <li>
          <a
            @click="$emit('changeFlag', 3)"
            :class="{ selected: flag === 3 }"
            href="#/completed"
            >已完成</a
          >
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('delCompleted')">
        清除已完成
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    flag: Number,
  },
  //计算属性
  computed: {
    //return计算返回结果
    shengyu() {
      return this.list.filter((item) => item.isDone === false).length;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>